<template>
  <div class="tableRow">
    <el-row class="select-list" v-permission="'bus:code:query'">
    <el-form  :inline="true" ref="selectForm" label-position="right" label-width="80px" :model="selectFormModel">
     
      <el-form-item label="标题" prop="title">
        <el-input v-model="selectFormModel.title" placeholder="标题" style="width:400px" size="small" clearable
          @keyup.enter.native="onSearch" />
      </el-form-item>
      <el-form-item label="类别" prop="parentId">
        <!--el-tree-select  文档地址 https://ayiaq1.github.io/el-tree-select/website/#/components/ElTreeSelect-->
        <el-tree-select v-model="selectFormModel.categoryId" :selectParams="dialog.selectParams"
        :treeParams="dialog.treeParams" size="small" ref="cateTreeSelect" lazy/>
      </el-form-item>
      
      <el-form-item :span="5">
        <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
        </el-button>
        <el-button type="warning" icon="el-icon-refresh" size="mini" plain round @click="onRefreshSelectForm()">重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-row>
    <!-- 表格模块 -->
    <data-table ref="dataTable" :api="getStructureList" :options="options" :columns="columns" :operates="operates"
      :query="selectFormModel" @handle-selection-change="handleSelectionChange" />
  
  </div>
</template>
<script lang="ts">
import DataTable from '@/components/DataTable/DataTable.vue';
import { Component, Ref, Vue } from 'vue-property-decorator';
import {
  categoryTreeSelectData
} from '@/api/investCategory';

import {
  getStructureList,
} from '@/api/investStructure';

@Component({ components: { DataTable } })
export default class SurveySearch extends Vue {
  data: Array<any> = [];
  @Ref('cateTreeSelect') cateTreeSelect!: any;
  @Ref('dataTable') dataTable!: any;
  @Ref('selectForm') selectForm!: any;
  private getStructureList: any = getStructureList;


  columns: any = [
    {
      label: 'ID',
      prop: 'id',
      width: 150,
      hide: true
    },
    {
      label: '标题',
      prop: 'title'
    },
    {
      label: '副标题',
      prop: 'subTitle'
    },
    {
      label: '年月',
      prop: 'monthId'
    },
    { label: '创建时间', prop: 'createTime', sortable: 'custom', width: 160, showOverflowTooltip: true }
  ];

  operates: any = {
    width: 200,
    fixed: 'right',
    list: [
      {
        label: '填报',
        type: 'warning',
        icon: 'el-icon-edit',
        plain: true,
        disabled: () => {
          return false;
        },
        permission: 'bus:survy:edit',
        method: (index: any, row: any) => {
          this.$router.push({path:'/bus/survey',query:{id:row.id}});
        }
      }
    ]
  };

  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: false, // 是否支持列表项选中功能
  };

  dialog: any = {
    dialogFormVisible: false,
    title: '对话框',
    isEdit: false,
    isBatchEditDisabled: true,
    isBatchRemoveDisabled: true,
    formData: [],
    selectParams: {
      clearable: true,
      placeholder: '请选择类别'
    },
    treeParams: {
      clickParent: true,
      filterable: true,
      accordion: true,
      data: [],
      props: {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
        value: 'id'
      }
    }
  };

  selectFormModel: any = {
    title: '',
    subTitle: '',
    categoryList: [],
    categoryId:''
  };
  // filterNode(value:any, data:any) {
  //     if (!value) return true;
  //     return data.label.indexOf(value) !== -1;
  // }


  // onLabelChanged(val: string, oldVal: string) {
  //     this.treeSelect.filter(val);
  // }


  onSearch(): void {
    this.dataTable.refresh();
  }

  searchFun(value: any): void {

      this.cateTreeSelect.filterFun(value);
  
  }

  onRefreshSelectForm(): void {
    //恢复搜索默认信息
    this.selectForm.resetFields();
    this.onSearch();
  }
  handleSelectionChange(row:any){
    this.$router.push({path:'/bus/survey',query:{id:row.id}});
  }

  getCategoryData() {
    categoryTreeSelectData().then((response: any) => {
      if (response.data) {
        this.dialog.treeParams.data=response.data;
      }
      this.cateTreeSelect.treeDataUpdateFun(response.data);
    }).catch((e) => {
      console.error(e);
    });
  }
  /*获取数据*/
  getData() {
    getStructureList().then(response => {
      this.data = response.data;
    }).catch((e) => {
      console.error(e);
    });
  }

  // handleCheckChange(data:any, checked:any, indeterminate:any) {

  //     let arr = this.getChildrenId(data);

  //     console.log("查找元素",arr);
  //     if(checked){
  //         arr.forEach((a:any) =>{
  //             if(!this.selectFormModel.categoryList.includes(a)){
  //                 this.selectFormModel.categoryList.push(a);
  //             }
  //         })
  //     }else{
  //         this.selectFormModel.categoryList = this.selectFormModel.categoryList.filter((a:any) =>
  //             !arr.includes(a)
  //         )
  //     }
  //     this.onSearch();
  // }

  // getChildrenId(data:any){
  //     let arr:any = [];
  //     if(data && data.id){
  //         arr.push(data.id);
  //     }
  //     if(data.children){
  //         for(let i in data.children){
  //             arr.push(... this.getChildrenId(data.children[i]));
  //         }
  //         return arr;
  //     }else{
  //         return arr;
  //     }
  // }

  mounted() {
    
    this.getData();
    this.getCategoryData();
    
  }
}

</script>
